<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted, computed, nextTick } from "vue";
import cameraPng from "@/assets/img/camera.png";
import daosanjiao from "@/assets/img/daosanjiao.png";
import ymx from "@/assets/img/ymx.svg";

withDefaults(
  defineProps<{
    // 结束数值
    title: number | string;
  }>(),
  {
    title: "地图",
  }
);
let map = null;

const locations = [
  { name: "瞿家湾游客接待中心", position: [113.19991, 29.962895] },
  { name: "基地营地", position: [113.193226, 29.963163] },
];

const customContent = `
  <div style="border-radius: 5px; font-size: 16px; display: flex; flex-direction: column; align-items: center; width: 40px;">
    <div style="border: 2px solid #70A195; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;">
      <img src="${cameraPng}" style="width: 20px; height: 20px;">
    </div>
    <img src="${daosanjiao}" style="width: 30px; height: 15px">
  </div>
`;

const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "9cd1aded40ea981870fadaf05b9bcb1c",
  };
  AMapLoader.load({
    key: "37bc1997ec271cd7edcaffab7e923f4e",
    // version: '2.0'
  })
    .then((AMap) => {
      map = new AMap.Map("mapContainer", {
        zoom: 15,
        // zoomEnable: false,
        mapStyle: "amap://styles/d529822834332594e3e80849838904df",
        center: [113.194258, 29.966049],
        // center: [113.208478, 29.959517]
      });
      locations.forEach((location) => {
        // 创建标记物
        const marker = new AMap.Marker({
          position: location.position,
          map: map,
          content: customContent,
        });
      });
      new AMap.Marker({
        position: [113.19262, 29.967511],
        map: map,
        content: `
          <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; width: 40px; height: 40px;">
            <img src="${ymx}" style="width: 20px; height: 20px;">
            <div style="color: #70A195; font-size: 12px;text-shadow: 0.1em 0.1em 0.2em black">洪湖鱼米香研学基地</div>
          </div>
        `,
      });
    })
    .catch((e) => {
      console.log("e", e);
    });
};

onMounted(() => {
  initMap();
});
</script>

<template>
  <div class="centermap">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <BorderBox13>
        <div class="quanguo">瞿家湾</div>
        <div id="mapContainer"></div>
      </BorderBox13>
    </div>
  </div>
</template>

<style>
.amap-marker-label {
  background-color: transparent !important;
  border: none !important;
}

.amap-logo {
  z-index: -1 !important;
}
</style>

<style scoped lang="scss">
#mapContainer {
  height: 100%;
}

.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 480px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
      z-index: 10;
    }
  }
}
</style>
